﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<!doctype html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
	<meta http-equiv="Expires" content="0" />
	<link rel="stylesheet" href="/lib/laydate/need/laydate.css">
	<script>
		document.write("<link type='text/css' href='/css/video/video.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
	</script>
	<script type="text/javascript" src="../js/news/jquery-1.9.1.js"></script>
	<script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
	<script src="/js/video/webVideoCtrltwo.js"></script>
	<script src="/js/video/videoTwo.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
</head>
<body style="position:relative">
<div class="left1" id="left1" style="width: 75%;height: 90%;position: fixed">
	<div id="divPlugin" class="plugin"></div>
</div>

<div class="rightTd" id="rightTd" style="width: 22px;float: right;overflow:auto;margin-right:3px" >
	<table style="height: 500px;margin-left: -3px;" id="rigTable">
		<tr>
			<td class="set1" style="width: 50px;height: 100%;padding-right: 0px">
				<image class="closeOpen" src="../img/video/default/open.png" style="margin: auto 0px" title="设置" id="closeOpen" onmousedown="changeImg(2,2)" onmouseup="changeImg(0,2)" onmouseout="changeImg(0,1)" onmouseover="changeImg(1,1)"></image>
			</td>
			<td class="set2" id="set2" style="display: none;padding-left: 0px;">
				<fieldset class="preview">
					<legend>预览</legend>
					<table cellpadding="0" cellspacing="3" border="0" style="margin-top: 6px;margin-bottom:10px ">
						<tr>
							<td colspan="3" style="margin-top: 10px">
								<image src="../img/video/default/startRealPlay.png" style="padding-right: 62px" onclick="clickStartRealPlay();" class="startRealPlay" onmouseout="changeImg('startRealPlay',0)" onmousedown="changeImg('startRealPlay',2)" onmouseup="changeImg('startRealPlay',0)" title="开始预览" onmouseover="changeImg('startRealPlay',1)"></image>

								<image src="../img/video/default/stopRealPlay.png" onclick="clickStopRealPlay();"  title="停止预览"  onmouseout="changeImg('stopRealPlay',0)" onmousedown="changeImg('stopRealPlay',2)" onmouseup="changeImg('stopRealPlay',0)" class="stopRealPlay" onmouseover="changeImg('stopRealPlay',1)"></image>
							</td>
						</tr>
					</table>
					<div class="line"></div>
				</fieldset>
				<fieldset class="ptz" style="margin-top: 16px">
					<legend>云台控制</legend>
					<table cellpadding="0" cellspacing="3" border="0" style="margin-top: 6px;">
						<tr>
							<td colspan="3">
								<image src="../img/video/default/leftTop.png" style="padding-left: 0px"  onmouseout="changeImg('leftTop',0)" onmousedown="mouseDownPTZControl(5,'leftTop');" onmouseup="mouseUpPTZControl('leftTop');" class="leftTop" onmouseover="changeImg('leftTop',1)" title="左上"></image>
								<image src="../img/video/default/top.png"  onmouseout="changeImg('top',0)" onmousedown="mouseDownPTZControl(1,'top');" onmouseup="mouseUpPTZControl('top');"  class="top" onmouseover="changeImg('top',1)"  title="上"></image>
								<image src="../img/video/default/rightTop.png" style="padding-right: 46px" onmouseout="changeImg('rightTop',0)" onmousedown="mouseDownPTZControl(7,'rightTop');" onmouseup="mouseUpPTZControl('rightTop');" class="rightTop" onmouseover="changeImg('rightTop',1)"  title="右上"></image>

								<image src="../img/video/default/PTZZoomIn.png"  onmouseout="changeImg('PTZZoomIn',0)" onmousedown="PTZZoomIn('PTZZoomIn')" onmouseup="PTZZoomStop('PTZZoomIn')" class="PTZZoomIn" onmouseover="changeImg('PTZZoomIn',1)"  title="变倍+"></image>
								<image src="../img/video/default/PTZZoomOut.png"  onmouseout="changeImg('PTZZoomOut',0)"  onmousedown="PTZZoomout('PTZZoomOut')" onmouseup="PTZZoomStop('PTZZoomOut')" class="PTZZoomOut" onmouseover="changeImg('PTZZoomOut',1)"  title="变倍-"></image>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<image src="../img/video/default/left.png" style="padding-left: 0px" onmouseout="changeImg('left',0)" onmousedown="mouseDownPTZControl(3,'left');" onmouseup="mouseUpPTZControl('left');" class="left" onmouseover="changeImg('left',1)"  title="左"></image>
								<image src="../img/video/default/auto.png"  onmouseout="changeImg('auto',0)" onclick="mouseDownPTZControl(9,'');" onmousedown="changeImg('auto',2)" onmouseup="changeImg('auto',0)" class="auto"  onmouseover="changeImg('auto',1)" title="自动"></image>
								<image src="../img/video/default/right.png" style="padding-right: 46px" onmouseout="changeImg('right',0)" onmousedown="mouseDownPTZControl(4,'right');" onmouseup="mouseUpPTZControl('right');" class="right" onmouseover="changeImg('right',1)"  title="右"></image>

								<image src="../img/video/default/PTZFoucusIn.png"  onmouseout="changeImg('PTZFoucusIn',0)" onmousedown="PTZFocusIn('PTZFoucusIn')" onmouseup="PTZFoucusStop('PTZFoucusIn')" class="PTZFoucusIn"  onmouseover="changeImg('PTZFoucusIn',1)"  title="变焦+"></image>
								<image src="../img/video/default/PTZFoucusOut.png"  onmouseout="changeImg('PTZFoucusOut',0)" onmousedown="PTZFoucusOut('PTZFoucusOut')" onmouseup="PTZFoucusStop('PTZFoucusOut')" class="PTZFoucusOut" onmouseover="changeImg('PTZFoucusOut',1)" title="变焦-"></image>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<image src="../img/video/default/leftBottom.png" style="padding-left: 0px" onmouseout="changeImg('leftBottom',0)" onmousedown="mouseDownPTZControl(6,'leftBottom');" onmouseup="mouseUpPTZControl('leftBottom');" class="leftBottom" onmouseover="changeImg('leftBottom',1)"  title="左下"></image>
								<image src="../img/video/default/bottom.png" onmouseout="changeImg('bottom',0)" onmousedown="mouseDownPTZControl(2,'bottom');" onmouseup="mouseUpPTZControl('bottom');" class="bottom" onmouseover="changeImg('bottom',1)"  title="下"></image>
								<image src="../img/video/default/rightBottom.png" style="padding-right: 46px" onmouseout="changeImg('rightBottom',0)" onmousedown="mouseDownPTZControl(8,'rightBottom');" onmouseup="mouseUpPTZControl('rightBottom');" class="rightBottom" onmouseover="changeImg('rightBottom',1)"  title="右下"></image>

								<image src="../img/video/default/PTZIrisIn.png" onmouseout="changeImg('PTZIrisIn',0)" onmousedown="PTZIrisIn('PTZIrisIn')" onmouseup="PTZIrisStop('PTZIrisIn')" class="PTZIrisIn" onmouseover="changeImg('PTZIrisIn',1)"  title="光圈+"></image>
								<image src="../img/video/default/PTZIrisOut.png" onmouseout="changeImg('PTZIrisOut',0)" onmousedown="PTZIrisOut('PTZIrisOut')" onmouseup="PTZIrisStop('PTZIrisOut')" class="PTZIrisOut" onmouseover="changeImg('PTZIrisOut',1)"  title="光圈-"></image>
							</td>
						</tr>
					</table>
					<table cellpadding="0" cellspacing="3" border="0" style="margin-bottom: 10px">
						<tr>
							<td class="tt">云台速度</td>
							<td>
								<select id="ptzspeed" class="sel" onmouseout="changeImg('sel',0)" onmousedown="changeImg('sel',2)" onmouseup="changeImg('sel',0)" onmouseover="changeImg('sel',1)">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
									<option>6</option>
									<option>7</option>
								</select>
							</td>
							<td><image src="../img/video/default/setPreset.png" onmouseout="changeImg('setPreset',0)" onclick="clickSetPreset();" class="setPreset" onmousedown="changeImg('setPreset',2)" onmouseup="changeImg('setPreset',0)" onmouseover="changeImg('setPreset',1)" title="设置"></image></td>
						</tr>
							<td class="tt">预置点号</td>
							<td>
								<select id="preset" type="text" class="txt sel" value="1" onmouseout="changeImg('sel',0)" onmousedown="changeImg('sel',2)" onmouseup="changeImg('sel',0)" onmouseover="changeImg('sel',1)"/>
									<option value="1">预置点1</option>
									<option value="2">预置点2</option>
						  		</select>
							</td>
							<td><image src="../img/video/default/goPreset.png" onmouseout="changeImg('goPreset',0)" onclick="clickGoPreset();" class="goPreset" onmousedown="changeImg('goPreset',2)" onmouseup="changeImg('goPreset',0)" onmouseover="changeImg('goPreset',1)" title="调用"></image></td>
						</tr>
					</table>
					<div class="line"></div>
				</fieldset>

				<fieldset class="playback" style="margin-top: 16px">
					<legend>回放</legend>
					<table  cellpadding="0" cellspacing="3" border="0" style="margin-top: 6px;">
						<tr>
							<td class="tt1" colspan="2">
								开始时间:
								<input id="starttime" type="text" class="txt text"  onmouseout="changeImg('text',0)" onmousedown="changeImg('text',2)" onmouseup="changeImg('text',0)" onmouseover="changeImg('text',1)" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" />
							</td>
							<td rowspan="2">
								<image src="../img/video/default/recordSearch.png" onmouseout="changeImg('recordSearch',0)" onclick="clickRecordSearch(0);" class="recordSearch" onmousedown="changeImg('recordSearch',2)" onmouseup="changeImg('recordSearch',0)" onmouseover="changeImg('recordSearch',1)" title="搜索"></image>
							</td>
						</tr>
						<tr>
							<td class="tt1" colspan="2">
								结束时间:
								<input id="endtime" type="text" class="txt text" onmouseout="changeImg('text',0)" onmousedown="changeImg('text',2)" onmouseup="changeImg('text',0)" onmouseover="changeImg('text',1)" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" />
							</td>
						</tr>
						<tr>
							<td colspan="3" style="padding-top: 4px" >
								<div class="searchdiv" >
									<table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
								</div>
							</td>
						</tr>
						<tr style="padding-top: 10px">
							<td colspan="3" style="padding-top: 10px">
								<image src="../img/video/default/startPlayBack.png" style="margin-right: 64px" onclick="clickStartPlayback();" onmouseout="changeImg('startPlayBack',0)" class="startPlayBack" onmousedown="changeImg('startPlayBack',2)" onmouseup="changeImg('startPlayBack',0)" onmouseover="changeImg('startPlayBack',1)" title="开始回放"></image>

								<image src="../img/video/default/stopPlayBack.png"  onclick="clickStopPlayback();"  onmouseout="changeImg('stopPlayBack',0)" class="stopPlayBack" onmousedown="changeImg('stopPlayBack',2)" onmouseup="changeImg('stopPlayBack',0)" onmouseover="changeImg('stopPlayBack',1)" title="停止回放"></image>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<image src="../img/video/default/playSlow.png"  onclick="clickPlaySlow();"  class="playSlow" onmouseout="changeImg('playSlow',0)"  onmousedown="changeImg('playSlow',2)" onmouseup="changeImg('playSlow',0)" onmouseover="changeImg('playSlow',1)"  title="慢放"></image>
								<image src="../img/video/default/pause.png" onclick="clickPause();"  class="pause" onmouseout="changeImg('pause',0)" onmousedown="changeImg('pause',2)" onmouseup="changeImg('pause',0)" onmouseover="changeImg('pause',1)" title="暂停"></image>
								<image src="../img/video/default/playFast.png" style="margin-right: 54px" onclick="clickPlayFast();"  class="playFast" onmouseout="changeImg('playFast',0)"  onmousedown="changeImg('playFast',2)" onmouseup="changeImg('playFast',0)" onmouseover="changeImg('playFast',1)" title="快放"></image>

								<image src="../img/video/default/frame.png" onclick="clickFrame();"  class="frame" onmouseout="changeImg('frame',0)" onmousedown="changeImg('frame',2)" onmouseup="changeImg('frame',0)" onmouseover="changeImg('frame',1)" title="单帧"></image>
								<image src="../img/video/default/reversePlayBack.png"  onclick="clickReversePlayback();" onmouseout="changeImg('reversePlayBack',0)" class="reversePlayBack"  onmousedown="changeImg('reversePlayBack',2)" onmouseup="changeImg('reversePlayBack',0)" onmouseover="changeImg('reversePlayBack',1)" title="倒放"></image>
								<image src="../img/video/default/resume.png"  onclick="clickResume();"  class="resume" onmouseout="changeImg('resume',0)" onmousedown="changeImg('resume',2)" onmouseup="changeImg('resume',0)" onmouseover="changeImg('resume',1)" title="恢复"></image>

							</td>
						</tr>
					</table>
				</fieldset>

			</td>
		</tr>
	</table>

</div>
</body>
<script>

	/*$(function () {
        alert(document.getElementById("rightTd").offsetWidth)
    })
*/
    $(".set1").click(function () {
        if($(".set2").css("display")=="none"){
            $(".set2").show();
            document.getElementById("rightTd").style.width='337px';
            document.getElementById("rightTd").style.marginRight='-7px';
            $(".closeOpen").attr("src","../img/video/default/close.png");
        }else{
            $(".set2").hide();
            document.getElementById("rightTd").style.width='22px';
            document.getElementById("rightTd").style.marginRight='3px';
            $(".closeOpen").attr("src","../img/video/default/open.png");
        }
        var vdos = document.querySelectorAll("object");
        for(var i = 0; i < vdos.length; i++){
            var width=$(document).width()-document.getElementById("rightTd").offsetWidth -15;
            vdos[i].style.width=width+'px';
        }
/*
        $('#starttime').click(function(){
			setTimeout(function(){
				var left = $('#laydate_box').position().left - 40;
				$('#laydate_box').css('left',left);
				num = 0;
			},200);

		});
        $('#endtime').click(function(){
			setTimeout(function(){
				var left = $('#laydate_box').position().left - 40;
				$('#laydate_box').css('left',left);
			},200);
        });*/
    })

	function changeImg(cla,flag) {
        var str=$("#closeOpen").attr('src');
        if(cla==0 && flag==1){//移除
            $("#closeOpen").attr('src',str.replace('float','default'));
        }else if(cla==0 && flag==2){//弹起
            $("#closeOpen").attr('src',str.replace('keyDown','default'))
        }else if(cla==1){//浮动
            $("#closeOpen").attr('src',str.replace('default','float'))
        }else if(cla==2){//按下
            $("#closeOpen").attr('src',str.replace('default','keyDown'))
        }else{
            var src='../img/video/';
            if(flag==1){//浮动
                src+='float';
            }else if(flag==2){//按下
                src+='keyDown';
            }else{//弹起
                src+='default';
            }
            src+='/'+cla+'.png';
            $("."+cla).attr("src",src);
        }
    }
</script>

</html>
